<%--
  - Author		:	이 영호
  --%>
<%@ page language="java" %>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/pages/includes/taglibs.jspf" %>
<%@ include file="/WEB-INF/pages/includes/variables.jspf" %>
<%@ include file="/WEB-INF/pages/includes/doctype.jspf" %>
<html>
	<head>
<%@ include file="/WEB-INF/pages/includes/metatags.jspf" %>
		<title><fmt:message key="pages.title" /></title>
		<link rel="stylesheet" type="text/css" href="<c:url value="${dirStyles}/common.css" />" />

		<script type="text/javascript" src="<c:url value="${dirScripts}/jquery-1.7.2.min.js" />"></script>
		<script type="text/javascript">
			$(function(){
			});
			
			function validation(){
				try{
					with(document.frm){
						bizNum.value=bizNum1.value+"-"+bizNum2.value+"-"+bizNum3.value;
						tel.value=tel1.value+"-"+tel2.value+"-"+tel3.value;
						mobile.value=mobile1.value+"-"+mobile2.value+"-"+mobile3.value;
						fax.value=fax1.value+"-"+fax2.value+"-"+fax3.value;
						addrNum.value=addrNum1.value+"-"+addrNum2.value;
						
						for(var i=0;i<$("input").length;i++){
							if($("input").eq(i).attr("name") && ! $("input").eq(i).attr("disabled") && $("input").eq(i).val().replace(/\s/g, '') == ""){
								alert($("input").eq(i).attr("title")+"을(를) 입력 해주세요.");
								$("input").eq(i).focus();
								return false;
							}
						}
						
						if(eval(chkDuplId())){
							alert("아이디가 중복되었습니다.");
							id.focus();	
							return false;
						}
						
						if(id.value.replace(/\s/g, '') == ""){
							return false;
						}
						
						if(authority.value=="ROLE_USER"){
							if(bizNum1.value.replace(/\s/g, '') == ""){
								alert("사업자 등록 번호를 입력하세요.");
								return false;
							}
							if(bizNum2.value.replace(/\s/g, '') == ""){
								alert("사업자 등록 번호를 입력하세요.");
								return false;
							}
							if(bizNum3.value.replace(/\s/g, '') == ""){
								alert("사업자 등록 번호를 입력하세요.");
								return false;
							}	
						}
						
						if(pw.value.replace(/\s/g, '') == ""){
							alert("비밀번호를 입력하세요.");
							return false;
						}
						if(pwChk.value.replace(/\s/g, '') == ""){
							alert("비밀번호 확인을 입력하세요.");
							return false;
						}
						
						if(pw.value != pwChk.value){
							alert("비밀번호와 비밀번호 확인의 값이 같지 않습니다.");
							pw.focus();
							return false;
						}
						
					}
				}catch(err){
					alert(err);
					return false;	
				}
				
				if(! confirm("가입 하시겠습니까?")){
					return false;
				}
				
				return true;
			}
			
			function chkId(){
				if(document.frm.id.value.replace(/\s/g, '') == ""){
					alert("아이디를 입력하세요.");
					document.frm.id.focus();	
				}else if(eval(chkDuplId())){
					alert("아이디가 중복되었습니다.");
					document.frm.id.focus();
				}else{
					alert("사용가능한 아이디입니다.");
				}
			}
			
			function chkDuplId(){
				var result = false;
				
				var userId =  document.frm.id.value;
				if(userId.replace(/\s/g, '') == ""){
					alert("아이디를 입력하세요.");
					document.frm.id.focus();	
				}else{
					$.ajax({
						type: "GET",
						url: "<c:url value="/user/chkDupl.do" />",
						dataType: "text",
						async: false,
						data: {
							"userId" : userId
						},
						success: function(data){
							result = data;
						},
						beforeSend: function(){
						},
						error: function(jqXHR, textStatus, errorThrown){
							//alert(jqXHR.responseText); //에러 페이지 내용
							alert("오류가 발생하였습니다.\n관리자에게 문의 바랍니다.");
						},
						complete: function(){
						}
					 });
				}
				return result;
			}
			
			function addrPop(){
				window.open("<c:url value="/addr.jsp" />", "addr", "channelmode=0,directories=0,fullscreen=0,width=400,height=300");
			}
			
			function setAddr(addrNum, addr1){
				document.frm.addrNum1.value = addrNum.split("-")[0]; 
				document.frm.addrNum2.value = addrNum.split("-")[1];
				document.frm.addr1.value = addr1;
			}
			
			function chgAuth(val){
				if(val == "ROLE_USER"){
					$(".disObj").removeAttr("disabled");
				}else{
					$(".disObj").attr("disabled", true);
				}
			}

		</script>
	</head>
	<body>
		<%@ include file="/WEB-INF/pages/includes/header.jsp" %>
		<div class="bodyWrap" style="margin: 38px auto;">
			<form name="frm" method="post" action="<c:url value="/user/submit.do" />" onsubmit="return validation();">
				<div style="margin: 0 auto; width: 748px;">
					<div class="contMenuTitle" style="margin-bottom: 20px;">회원가입</div>
					<table class="formTbl">
						<colgroup>
							<col width="140px" />
							<col width="*" />
						</colgroup>
						<caption style="color: #c9c9c9; font-size: 12px;"><font class="redFont">*</font>표시는 필수입력 사항</caption>
						<tbody>
							<tr>
								<th><font class="redFont">*</font> 회원등급</th>
								<td colspan="3">
									<select name="authority" onchange="javascript:chgAuth(this.value);">
										<option value="ROLE_USER">일반회원</option>
										<option value="ROLE_TESTER">체험단</option>
									</select>
								</td>
							</tr>
							<tr>
								<th><font class="redFont">*</font> 아이디</th>
								<td>
									<input type="text" name="id" title="아이디" alt="아이디" maxlength="15">
								</td>
								<th>아이디 중복확인</th>
								<td>
									<a href="javascript:chkId();"><img class="btn" src="<c:url value="${dirImages}/join_id_check.gif" />" title="아이디 중복확인" alt="아이디 중복확인" /></a>
								</td>
							</tr>
							<tr>
								<th><font class="redFont">*</font> 사업자 등록 번호</th>
								<td colspan="3">
									<input type="text" name="bizNum1" class="disObj" title="사업자 등록 번호" alt="사업자 등록 번호">-<input type="text" name="bizNum2" class="disObj" title="사업자 등록 번호" alt="사업자 등록 번호">-<input type="text" name="bizNum3" class="disObj" title="사업자 등록 번호" alt="사업자 등록 번호">
									<input type="hidden" name="bizNum" class="disObj" title="사업자 등록 번호" alt="사업자 등록 번호">
								</td>
							</tr>
							<tr>
								<th><font class="redFont">*</font> 이름</th>
								<td colspan="3">
									<input type="text" name="name" title="이름" alt="이름">
								</td>
							</tr>
							<tr>
								<th><font class="redFont">*</font> 비밀번호</th>
								<td>
									<input type="password" name="pw" title="비밀번호" alt="비밀번호" maxlength="15">
								</td>
								<th><font class="redFont">*</font> 비밀번호 확인</th>
								<td>
									<input type="password" name="pwChk" title="비밀번호 확인" alt="비밀번호 확인" maxlength="15">
								</td>
							</tr>
							<tr>
								<th><font class="redFont">*</font> 이메일</th>
								<td colspan="3">
									<input type="text" name="email" title="이메일" alt="이메일" maxlength="30">
								</td>
							</tr>
							<tr>
								<th><font class="redFont">*</font> 업체명</th>
								<td colspan="3">
									<input type="text" name="bizNm" class="disObj" title="업체명" alt="업체명"  maxlength="25">
								</td>
							</tr>
							<tr>
								<th><font class="redFont">*</font> 부서명</th>
								<td colspan="3">
									<input type="text" name="team" class="disObj" title="부서명" alt="부서명" maxlength="25">
								</td>
							</tr>
							<tr>
								<th><font class="redFont">*</font> 전화번호</th>
								<td colspan="3">
									<input type="text" name="tel1" title="전화번호" alt="전화번호" maxlength="3" size="3">
									-
									<input type="text" name="tel2" title="전화번호" alt="전화번호" maxlength="4" size="4">
									-
									<input type="text" name="tel3" title="전화번호" alt="전화번호" maxlength="4" size="4">
									<input type="hidden" name="tel" title="전화번호" alt="전화번호">
								</td>
							</tr>
							<tr>
								<th><font class="redFont">*</font> 휴대전화</th>
								<td colspan="3">
									<input type="text" name="mobile1" title="휴대전화" alt="휴대전화" maxlength="3" size="3">
									-
									<input type="text" name="mobile2" title="휴대전화" alt="휴대전화" maxlength="4" size="4">
									-
									<input type="text" name="mobile3" title="휴대전화" alt="휴대전화" maxlength="4" size="4">
									<input type="hidden" name="mobile" title="휴대전화" alt="휴대전화">
								</td>
							</tr>
							<tr>
								<th><font class="redFont">*</font> FAX</th>
								<td colspan="3">
									<input type="text" name="fax1" class="disObj" title="FAX" alt="FAX" maxlength="3" size="3">
									-
									<input type="text" name="fax2" class="disObj" title="FAX" alt="FAX" maxlength="4" size="4">
									-
									<input type="text" name="fax3" class="disObj" title="FAX" alt="FAX" maxlength="4" size="4">
									<input type="hidden" name="fax" class="disObj" title="FAX" alt="FAX">
								</td>
							</tr>
							<tr>
								<th><font class="redFont">*</font> 우편번호</th>
								<td colspan="3">
									<input type="text" name="addrNum1" title="우편번호" alt="우편번호" maxlength="3" size="3" readonly="readonly" onfocus="javascript:this.blur();">
									-
									<input type="text" name="addrNum2" title="우편번호" alt="우편번호" maxlength="3" size="3" readonly="readonly" onfocus="javascript:this.blur();">
									<img class="btn" src="<c:url value="${dirImages}/join_add_check.gif" />" title="우편번호 확인" alt="우편번호 확인" style="vertical-align: top;" onclick="javascript:addrPop();" />
									<input type="hidden" name="addrNum" title="우편번호" alt="우편번호">
								</td>
							</tr>
							<tr>
								<th><font class="redFont">*</font> 주소1</th>
								<td colspan="3">
									<input type="text" name="addr1" title="주소1" alt="주소1" maxlength="80" size="80">
								</td>
							</tr>
							<tr>
								<th><font class="redFont">*</font> 주소2</th>
								<td colspan="3">
									<input type="text" name="addr2" title="주소2" alt="주소2" maxlength="80" size="80">
								</td>
							</tr>
						</tbody>
					</table>
					<div class="btnWrap centerBtnWrap">
						<input type="submit" class="btn btn_ok" alt="확인" title="확인" value="">
						<input type="button" class="btn btn_cancel" alt="취소" title="취소" onclick="javascript:location.href='<c:url value="/" />';">
					</div>
				</div>
			</form>
		</div>
		<%@ include file="/WEB-INF/pages/includes/footer.jsp" %>
	</body>
</html>